<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8"/>
        <title>仓库内商品信息展示</title>
        <meta content="webkit" name="renderer"/>
        <link href="../../css/font.css" rel="stylesheet"/>
        <link href="../../css/xadmin.css" rel="stylesheet"/>
        <script charset="utf-8" src="../../lib/layui/layui.js"></script>
        <script src="../../js/xadmin.js" type="text/javascript"></script>
        <script src="../../js/vue2.7min.js"></script>
        <script src="../../js/axios.min.js"></script>
    </head>
    <body>
        <div class="x-nav">
            <a
                    class="layui-btn layui-btn-small"
                    onclick="location.reload()"
                    style="line-height: 1.6em; margin-top: 3px; float: right"
                    title="刷新"
            >
                <i class="layui-icon layui-icon-refresh" style="line-height: 30px"></i
                ></a>
        </div>
        <div class="layui-fluid" id="app">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <p
                                    class="layui-btn"
                                    v-if="errorMessage!==null">
                                {{errorMessage}}
                            </p>
                        </div>
                        <div class="layui-card-body layui-table-body layui-table-main">
                            <table class="layui-table layui-form">
                                <thead>
                                <tr>
                                    <th>编号</th>
                                    <th>商品ID</th>
                                    <th>商品名称</th>
                                    <th>商品价格</th>
                                    <th>商品数量</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                <!--模板开始-->
                                <tr v-for="(item , index) in warehouseDetailList">
                                    <td>{{index+1}}</td>
                                    <td v-text="item.goodsId"></td>
                                    <td v-text="item.goodsName"></td>
                                    <td v-text="item.goodsPrice"></td>
                                    <td v-text="item.goodsNumber"></td>

                                    <!--操作-->
                                    <td class="td-manage">
                                        <span class="layui-btn layui-btn-normal layui-btn-mini"
                                              style="background-color: orange"
                                              @click="sell(item.goodsId,item.goodsNumber)">出库</span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script type="text/javascript">
            var vm = new Vue({
                el: "#app",
                data: {
                    //仓库细节
                    warehouseId: null,
                    goodsId: null,
                    goodsName: null,
                    goodsPrice: null,
                    goodsNumber: null,
                    //仓库内货物详情
                    warehouseDetailList: null,
                    //报错信息
                    errorMessage:null,
                },
                methods: {
                    getAll(aimId) {
                        var jsonD = {
                            id: aimId
                        }
                        axios.post("../../../warehouseDetail/getAll", jsonD)
                            .then(function (response) {
                                if (response.data.code === 1) {
                                    vm.warehouseDetailList = response.data.data;
                                } else {
                                    vm.errorMessage=response.data.msg;
                                    alert(vm.errorMessage);
                                }

                            }, function (err) {
                                console.log(err);

                            })

                    },
                    //获取url参数
                    url1(name) {
                        //获取上一地址中的get参数
                        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                        var r = window.location.search.substr(1).match(reg);
                        if (r != null)
                            return unescape(r[2]);
                        return null;
                    },
                    sell(id, num) {
                        //修改管理员状态
                        window.location.href = './sell.html?goods_id=' + id + "&warehouse_id=" + vm.warehouseId + "&goods_number=" + num;
                    }
                },
                mounted: function () {
                    this.getAll(this.url1("id"));
                    this.warehouseId = this.url1("id");
                }
            });
        </script>
    </body>

</html>

